<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // Tailwind配置
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        danger: '#ef4444',
                        warning: '#f59e0b',
                        dark: '#1e293b',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-height {
                transition: max-height 0.3s ease-in-out;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5;
            }
        }
    </style>
     <script src="admin.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <header class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex justify-between items-center">
                <h1 class="text-xl font-bold text-gray-900 flex items-center">
                    <i class="fa fa-cogs text-primary mr-2"></i>
                    配置管理后台
                </h1>
                <div class="flex space-x-4">
                    <button id="refreshBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-md btn-hover flex items-center">
                        <i class="fa fa-refresh mr-1"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 应用配置部分 -->
        <section>
            <div class="bg-white rounded-xl p-6 card-shadow">
                <div class="flex justify-between items-center mb-6">
                    <div class="flex items-center space-x-4">
                        <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                            <i class="fa fa-th-large text-secondary mr-2"></i>
                            应用配置
                        </h2>
                        <!-- 批量操作区域 -->
                        <div id="batchActions" class="hidden flex items-center space-x-2">
                            <span id="selectedCount" class="text-sm text-gray-600">已选择 0 项</span>
                            <button id="batchDeleteBtn" class="bg-danger hover:bg-danger/90 text-white font-medium py-1 px-3 rounded-md btn-hover flex items-center text-sm">
                                <i class="fa fa-trash mr-1"></i> 批量删除
                            </button>
                            <button id="batchCancelBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-1 px-3 rounded-md btn-hover flex items-center text-sm">
                                <i class="fa fa-times mr-1"></i> 取消选择
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!-- 搜索框 -->
                        <div class="relative">
                            <input type="text" id="searchInput" placeholder="搜索应用名称或AppId..." 
                                   class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-64">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                        <!-- 过滤器 -->
                        <select id="filterSelect" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="all">全部应用</option>
                            <option value="hasId">有AppId</option>
                            <option value="noId">无AppId</option>
                        </select>
                        <button id="addAppBtn" class="bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-md btn-hover flex items-center">
                            <i class="fa fa-plus mr-1"></i> 添加应用
                        </button>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12">
                                    <input type="checkbox" id="selectAll" class="rounded border-gray-300 text-primary focus:ring-primary">
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">应用名称</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AppId</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Secret</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">文件夹状态</th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody id="appsTableBody" class="bg-white divide-y divide-gray-200">
                            <!-- 应用配置将通过JavaScript动态生成 -->
                            <tr>
                                <td colspan="4" class="px-6 py-12 text-center text-gray-500">
                                    <i class="fa fa-spinner fa-spin mr-2"></i> 加载配置中...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </main>

    <!-- 添加/编辑应用配置的模态框 -->
    <div id="appModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 id="modalTitle" class="text-lg font-medium text-gray-900">添加应用配置</h3>
            </div>
            <div class="px-6 py-4">
                <div class="space-y-4">
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">应用名称</label>
                        <input type="text" id="appName" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <p id="appNameError" class="text-xs text-danger hidden">应用名称已存在</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">AppId</label>
                        <input type="text" id="appId" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <p id="appIdError" class="text-xs text-danger hidden">AppId格式不正确</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">Secret</label>
                        <input type="text" id="appSecret" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">游戏名</label>
                        <input type="text" id="gameName" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <p id="gameNameError" class="text-xs text-danger hidden">游戏名不能超过100个字符</p>
                    </div>
                </div>
            </div>
            <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
                <button id="cancelModalBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md btn-hover">取消</button>
                <button id="saveAppBtn" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md btn-hover">保存</button>
            </div>
        </div>
    </div>

    <!-- 提示消息 -->
    <div id="toast" class="fixed bottom-4 right-4 px-6 py-3 rounded-md shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center z-50">
        <i id="toastIcon" class="fa fa-check-circle mr-2"></i>
        <span id="toastMessage">操作成功</span>
    </div>

</body>
</html>